<template>
  <div>
    <el-input ref="inputBox" v-model="lenovoData" size="small" @input="input"  :placeholder="$attrs.placeholder"
      :show-word-limit="$attrs['show-word-limit']" :clearable="$attrs.clearable" :disabled="$attrs.disabled" :prefix-icon="$attrs['prefix-icon']" :suffix-icon='$attrs["suffix-icon"]'
      :readonly="$attrs.readonly" :maxlength="$attrs.maxLength">
          <el-button slot="prepend"  v-if='$attrs.prepend'>{{$attrs.prepend}}</el-button>
          <el-button slot="append"  v-if='$attrs.append'>{{$attrs.append}}</el-button>
      </el-input>
      <i  class="el-icon-more moreIcon" @click='showDialog'></i>
    <div v-if="visible" >
      <LenovoDialog ref="getLenovoData" @userInfo="userInfo" :tagsList="tagsList"   @closeDialog="visible = false"  :dataSource='dataSource' :fieldName='fieldName' :dictName="dictName" :dataType="dataType"/>
    </div>
  </div>
</template>

<script>
import LenovoDialog from './LenoveDialog.vue'
export default {
  name: "LenovoPopup",
  components: {
    LenovoDialog,
  },
  data() {
    return {
      visible:false,
      lenovoData:this.value,
      width: this.$attrs.maxLength,
      tagsList:[]
    }
  },
  props:['value','fieldName','dataSource','dataType','dictName'],
  created(){
    this.lenovoData = this.value
  },
  watch:{
    value(val){
      this.lenovoData=val
    }
  },
  methods: {
    input(val){
      this.$emit('input', val)
      this.$emit('change', val)
    },
    userInfo(data) {
      this.tagsList = data;
      if(this.dataType === 'datasource') {
        this.lenovoData = data[0][this.fieldName]
      }
      if(this.dataType === 'dictionary') {
        this.lenovoData = data[0].label
      }
      
      this.$emit('input', this.lenovoData)
      
    },
    showDialog(){
      this.visible= true
    },
    closeDialog(){
      this.visible=false
    }
  },
};
</script>

<style scope lang='scss'>
  .moreIcon{
    position: absolute;
    top: 10px;
    right: 25px;
    cursor: pointer;
    color: darkgrey;
  }
</style>
